<html>
<head>
    <style type="text/css">
        #placeholder1, #placeholder2 {
            color: red;
            width: 250px;
        }

        #placeholder1::placeholder {
            color: green;
        }
    </style>
</head>

<body>
<p>
    <input type="hidden" id="hidden" value="hidden" /><br />
    <input type="text" id="text" value="text" /><br />
    <input type="text" id="placeholder1" placeholder="This placeholder should be green" /><br />
    <input type="text" id="placeholder2" placeholder="This placeholder should be grey" /><br />
    <input type="search" id="search" value="search" /><br />
    <input type="tel" id="tel" value="tel" /><br />
    <input type="url" id="url" value="url" /><br />
    <input type="email" id="email" value="email" /><br />
    <input type="password" id="password" value="password" /><br />
    <input type="date" id="date" value="date" /><br />
    <input type="month" id="month" value="month" /><br />
    <input type="week" id="week" value="week" /><br />
    <input type="time" id="time" value="time" /><br />
    <input type="datetime-local" id="datetime-local" value="datetime-local" /><br />
    <input type="number" id="number" value="number" /><br />
    <input type="range" id="range" value="25" /><br />
    <input type="color" id="color" value="color" /><br />
    <input type="checkbox" id="checkbox" value="checkbox" /><br />
    <input type="radio" id="radio-a" value="a" name="test-radio" /><br />
    <input type="radio" id="radio-b" value="b" name="test-radio" /><br />
    <input type="radio" id="radio-c" value="c" name="test-radio" /><br />
    <input type="file" id="file" value="file" /><br />
    <input type="submit" id="submit" value="submit" /><br />
    <input type="image" id="image" value="image" /><br />
    <input type="reset" id="reset" value="reset" /><br />
    <input type="button" id="button" value="button" /><br />

    <input type="invalid" id="invalid" value="invalid" /><br />
</p>

<script>
    var ids = [
        "hidden",
        "text",
        "placeholder1",
        "placeholder2",
        "search",
        "tel",
        "url",
        "email",
        "password",
        "date",
        "month",
        "week",
        "time",
        "datetime-local",
        "number",
        "range",
        "color",
        "checkbox",
        "radio",
        "file",
        "submit",
        "image",
        "reset",
        "button",
        "invalid",
    ];
    document.addEventListener("DOMContentLoaded", function() {
        for (var i = 0; i < ids.length; i++) {
            var id = ids[i];
            var e = document.getElementById(id);
            console.log("id=", id, "type=", e.type);
        }

        var e = document.getElementById("invalid");
        e.type = "invalid2"
        console.log("after change type=", e.type);

        e.type = "number"
        console.log("after change 2 type=", e.type);
        e.value = "123abc456"
        console.log("after value change value=", e.value);

    });
</script>
</body>
</html>
